﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标滑过显示边框动画（原创）</title>
<script src="../js/jquery.min.js"></script>
<style>
.border_bottom {
	width:40px;
	height:4px;
	background:#06C5D2;
	position:absolute;
	bottom:10px;
	left:20px;
	transition:all 0.2s ease-out;
}
.border_left {
	width:4px;
	height:0px;
	background:#06C5D2;
	position:absolute;
	bottom:10px;
	left:2px;
	transition:all 0.5s ease-out 0.1s;
}
.border_right {
	width:4px;
	height:0px;
	background:#06C5D2;
	position:absolute;
	bottom:10px;
	right:-1px;
	transition:all 0.5s ease-out 0.2s;
}
.border_top {
	width:0px;
	height:4px;
	background:#06C5D2;
	position:absolute;
	bottom:210px;
	left:0px;
	transition:all 0.2s ease-out 0.5s;
}
.border {
	width:450px;
	height:230px;
	border:1px solid red;
	margin-left:50px;
}
</style>
</head>
<body>
<div style="position: relative;top: 50px" class="border">
    <div class="border_bottom"></div>
    <div class="border_left"></div>
    <div class="border_right"></div>
    <div class="border_top"></div>
</div>

<script>
$(".border").mouseover(function() {
    $(".border_bottom").css({
        "width": "400px",
        "left": "2px",
        "transition": "all 0.2s ease-out 0s"
    });
    $(".border_left").css({
        "height": "200px",
        "left": "2px",
        "transition": "all 0.3s ease-out 0.2s"
    });
    $(".border_right").css({
        "height": "200px",
        "left": "402px",
        "transition": "all 0.6s ease-out 0.2s"
    });
    $(".border_top").css({
        "width": "404px",
        "left": "2px",
        "transition": "all 0.3s ease-out 0.5s"
    });
});
$(".border").mouseleave(function() {
    $(".border_bottom").css({
        "width": "40px",
        "left": "20px",
        "transition": "all 0.2s ease-out 0.6s"
    });
    $(".border_left").css({
        "height": "0px",
        "left": "2px",
        "transition": "all 0.3s ease-out 0.3s"
    });
    $(".border_right").css({
        "height": "0px",
        "left": "402px",
        "transition": "all 0.6s ease-out 0s"
    });
    $(".border_top").css({
        "width": "0px",
        "left": "2px",
        "transition": "all 0.3s ease-out 0s"
    });

});
</script>

</body>
</html>
